Skip to main content

🔤 Typography

Typography components are designed specifically for displaying and styling text within your application. This category includes various text elements that can be customized to match your design requirements.

Available Components:​

  • Headline Text
  • Body Text
  • Paragraph Text
  • Text Block
tip

All Typography Components are used in the same way

1. Select and Add a Component:​

  • Choose your component from the Typography category.
  • Drag and drop the component onto the Canvas, or click on it to automatically place it on the screen.
  • Drag the component to your preferred location on the Canvas.
  • Resize by dragging the edges or by setting the size using percentage values.

2. Set and Customize:​

  • Left Toolbar:

    • Change Text: Edit the text directly within the text box.
    • Add Action: Select “Add Action” to specify what happens when users tap or click on the component (e.g., navigate to a new page, open a modal, etc.)..
    • Set Styles for Specific Screen Sizes: Adjust and preview styles for mobile, tablet, or desktop so the text looks great on any screen size.

  • Right Toolbar:

    • Utilize all available customization features, such as font type, weight, size, color, alignment, border, shadow and etc.
    • Refer to the Customization Guide for detailed instructions.
info

The settings available in the right toolbar may vary depending on the selected component type.

Quick Tips​

  • Consistent Styling: Use the same font family and similar text sizes for titles and body text to maintain a cohesive look.
  • Readable Line Spacing: Increase line spacing (line height) slightly for paragraphs to improve readability.
  • Subtle Shadows: Keep shadows light and soft to avoid overpowering the main text.
  • Preview & Test: Click the Preview button (top-right corner) to see changes in real time on various device sizes.

Need Assistance?​

If you encounter any challenges or require further guidance while building your app, please refer to the Documentation or, contact our support team at [email protected].